// 输入框修复Mixin
// 用于在各个页面中修复输入框问题

export const inputMixin = {
	mounted() {
		// 页面挂载后修复输入框
		this.$nextTick(() => {
			this.fixPageInputs()
		})
	},
	
	methods: {
		// 修复页面中的输入框
		fixPageInputs() {
			// #ifdef H5
			// 在H5环境下修复输入框
			setTimeout(() => {
				const inputs = document.querySelectorAll('input, textarea')
				inputs.forEach(input => {
					this.fixSingleInput(input)
				})
			}, 200)
			// #endif
		},
		
		// 修复单个输入框
		fixSingleInput(input) {
			if (!input) return
			
			// 设置样式
			input.style.backgroundColor = '#fff'
			input.style.color = '#333'
			input.style.webkitUserSelect = 'text'
			input.style.userSelect = 'text'
			input.style.webkitAppearance = 'none'
			input.style.appearance = 'none'
			input.style.caretColor = '#667eea'
			input.style.zIndex = '1'
			input.style.position = 'relative'
			input.style.webkitTouchCallout = 'default'
			input.style.webkitTapHighlightColor = 'transparent'
			input.style.lineHeight = '1.4'
			input.style.verticalAlign = 'middle'
			input.style.height = 'auto'
			input.style.minHeight = '68rpx'
			
			// 如果是textarea，设置不同的垂直对齐
			if (input.tagName === 'TEXTAREA') {
				input.style.verticalAlign = 'top'
				input.style.minHeight = '120rpx'
			}
			
			// 添加事件监听
			input.addEventListener('focus', () => {
				this.onInputFocus(input)
			})
			
			input.addEventListener('blur', () => {
				this.onInputBlur(input)
			})
		},
		
		// 输入框聚焦事件
		onInputFocus(input) {
			input.style.backgroundColor = '#fff'
			input.style.color = '#333'
			input.style.zIndex = '999'
			
			// 滚动到输入框位置
			setTimeout(() => {
				input.scrollIntoView({ behavior: 'smooth', block: 'center' })
			}, 100)
		},
		
		// 输入框失焦事件
		onInputBlur(input) {
			input.style.zIndex = '1'
		},
		
		// 手动触发输入框修复
		triggerInputFix() {
			this.fixPageInputs()
		}
	}
}

export default inputMixin
